<template>
	<view class="dynamic-publish-page">

		<!-- 发布内容区域 -->
		<view class="publish-container">
			<!-- 文本输入框 -->
			<textarea class="content-input" v-model="content" placeholder="这一刻的想法..." auto-height
				maxlength="500"></textarea>

			<!-- 图片上传区域 -->
			<view class="image-upload" style="background-color: #ffff;padding: 23rpx 10rpx;">
				<!-- 已上传图片预览 -->
				<!-- <view class="uploaded-image" v-for="(img, index) in imageList" :key="index">
					<image :src="img" mode="aspectFill" class="preview-img"></image>
					<u-icon name="close-circle" color="#f44336" size="28rpx" class="delete-img"
						@click.stop="deleteImage(index)"></u-icon>
				</view> -->

				<!-- 上传按钮 -->
				<!-- 	<view class="upload-btn" @click="chooseImage" v-if="imageList.length < 9">
					<u-icon name="plus" color="#999" size="40rpx"></u-icon>
				</view> -->
				<FileUpload v-model="imgStr" :limit="6"></FileUpload>
			</view>

			<!-- 选择项区域 -->
			<view class="options-container">
				<!-- 选择类型 -->
				<view class="option-item" @click="showTypePicker = true">
					<u-icon name="tags" color="#999" size="28rpx" class="option-icon"></u-icon>
					<text class="option-label">选择类型</text>
					<text class="option-value">{{ selectedType || '未选择' }}</text>
					<u-icon name="arrow-right" color="#999" size="28rpx" class="option-arrow"></u-icon>
				</view>

				<!-- 所在位置 -->
				<view class="option-item" @click="chooseLocation">
					<u-icon name="map" color="#999" size="28rpx" class="option-icon"></u-icon>
					<text class="option-label">所在位置</text>
					<text class="option-value">{{ locationName || '未选择' }}</text>
					<u-icon name="arrow-right" color="#999" size="28rpx" class="option-arrow"></u-icon>
				</view>

				<!-- 谁可以看 -->
				<!-- <view class="option-item" @click="showPrivacyPicker = true">
					<u-icon name="eye" color="#999" size="28rpx" class="option-icon"></u-icon>
					<text class="option-label">谁可以看</text>
					<text class="option-value">{{ privacyText }}</text>
					<u-icon name="arrow-right" color="#999" size="28rpx" class="option-arrow"></u-icon>
				</view> -->
			</view>
		</view>

		<!-- 发布按钮 -->
		<view class="publish-btn-container">
			<button class="publish-btn" @click="publishDynamic">
				发表
			</button>
		</view>

		<!-- 类型选择器 -->
		<u-picker :show="showTypePicker" :columns="typeList" @confirm="handleTypeConfirm"
			@cancel="showTypePicker = false" title="选择动态类型"></u-picker>

		<!-- 隐私设置选择器 -->
		<u-picker :show="showPrivacyPicker" :columns="privacyList" @confirm="handlePrivacyConfirm"
			@cancel="showPrivacyPicker = false" title="谁可以看" keyName="label"></u-picker>
	</view>
</template>

<script>
	import {
		addDynamicBroadcast
	} from '@/common/api/dynamicBroadcast.js'

	import
	uploadApi
	from '@/common/api/upload.js'
	import FileUpload from '@/components/file-upload.vue'
	import {
		dynamicBroadcastType
	} from '@/common/jsonConfig.js'
	export default {
		data() {
			return {
				// 发布内容
				content: '',
				imageList: [], // 上传的图片列表
				imgStr: '',

				// 选择项数据
				showTypePicker: false,
				typeList: dynamicBroadcastType,
				selectedType: '',

				locationName: '', // 位置名称
				location: {}, // 位置详细信息

				showPrivacyPicker: false,
				privacyList: [
					[{
							label: '公开',
							value: 'public'
						},
						{
							label: '仅同事可见',
							value: 'colleague'
						},
						{
							label: '仅自己可见',
							value: 'self'
						}
					]
				],
				selectedPrivacy: 'public',
				privacyText: '公开'
			};
		},
		components: {
			FileUpload
		},
		computed: {
			// 判断是否可以发布（内容或图片至少有一个）
			canPublish() {
				return this.content.trim().length > 0 || this.imageList.length > 0;
			}
		},
		methods: {
			// 返回上一页
			navBack() {
				if (this.content || this.imageList.length) {
					uni.showModal({
						title: '提示',
						content: '内容尚未保存，是否离开？',
						success: (res) => {
							if (res.confirm) {
								uni.navigateBack({
									delta: 1
								});
							}
						}
					});
				} else {
					uni.navigateBack({
						delta: 1
					});
				}
			},

			// 更多操作
			showMore() {
				uni.showActionSheet({
					itemList: ['保存草稿', '发布设置'],
					success: (res) => {
						if (res.tapIndex === 0) {
							this.saveDraft();
						} else {
							uni.showToast({
								title: '发布设置功能待实现',
								icon: 'none'
							});
						}
					}
				});
			},

			// 保存草稿
			saveDraft() {
				if (!this.content && !this.imageList.length) {
					uni.showToast({
						title: '请输入内容',
						icon: 'none'
					});
					return;
				}
				// 实际项目中调用接口保存草稿
				uni.showToast({
					title: '草稿已保存',
					icon: 'success'
				});
			},

			// 选择图片
			chooseImage() {
				const maxCount = 9 - this.imageList.length;
				uni.chooseImage({
					count: maxCount,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						// 临时图片路径
						this.imageList = [...this.imageList, ...res.tempFilePaths];
					}
				});
			},

			// 删除图片
			deleteImage(index) {
				uni.showModal({
					title: '提示',
					content: '确定要删除这张图片吗？',
					success: (res) => {
						if (res.confirm) {
							this.imageList.splice(index, 1);
						}
					}
				});
			},

			// 选择位置
			chooseLocation() {
				uni.chooseLocation({
					success: (res) => {
						console.log(res)
						const jsonString = JSON.stringify(res);
						alert(jsonString)
						this.locationName = res.name;
						this.location = {
							latitude: res.latitude,
							longitude: res.longitude,
							address: res.address
						};
					},
					fail: (err) => {
						if (err.errMsg.includes('auth deny')) {
							uni.showToast({
								title: '请开启位置权限',
								icon: 'none'
							});
						}
					}
				});
			},

			// 确认选择类型
			handleTypeConfirm(e) {
				this.selectedType = e.value[0];
				this.showTypePicker = false;
			},

			// 确认隐私设置
			handlePrivacyConfirm(e) {
				this.selectedPrivacy = e.value[0].value;
				this.privacyText = e.value[0].label;
				this.showPrivacyPicker = false;
			},

			// 发布动态
			publishDynamic() {
				if (!this.content) {
					uni.showToast({
						title: '请输入发表内容！',
						icon: 'none'
					});
					return;
				}
				if (!this.selectedType) {
					uni.showToast({
						title: '请选择动态类型',
						icon: 'none'
					});
					return;
				}

				// 模拟发布请求
				uni.showLoading({
					title: '发布中...'
				});


				let form = {
					broadcastContent: this.content,
					type: this.selectedType,
					position: this.locationName,
					img: this.imgStr
				}


				addDynamicBroadcast(form).then((res) => {
					debugger
					if (res.code == 200) {
						uni.hideLoading();

						uni.reLaunch({
							url: '/pages/dtbb/dtbb?flg=' + 1
						});


					}
				})

			}
		}
	};
</script>

<style scoped>
	.dynamic-publish-page {
		background-color: #f5f7fa;
		min-height: 100vh;
	}

	/* 导航栏样式 */
	::v-deep .u-navbar {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 10;
	}

	/* 发布内容容器 */
	.publish-container {
		padding: 24rpx;
		/* 避开导航栏 */
	}

	/* 文本输入框 */
	.content-input {
		width: 100%;
		min-height: 200rpx;
		font-size: 30rpx;
		color: #333;
		padding: 16rpx;
		background-color: #fff;
		border-radius: 12rpx;
		margin-bottom: 24rpx;
		box-sizing: border-box;
		resize: none;
	}

	/* 图片上传区域 */
	.image-upload {
		display: flex;
		flex-wrap: wrap;
		gap: 16rpx;
		margin-bottom: 30rpx;
	}

	/* 已上传图片 */
	.uploaded-image {
		width: 160rpx;
		height: 160rpx;
		position: relative;
		border-radius: 8rpx;
		overflow: hidden;
	}

	.preview-img {
		width: 100%;
		height: 100%;
		display: block;
	}

	.delete-img {
		position: absolute;
		top: -8rpx;
		right: -8rpx;
		background-color: rgba(255, 255, 255, 0.8);
		border-radius: 50%;
	}

	/* 上传按钮 */
	.upload-btn {
		width: 160rpx;
		height: 160rpx;
		background-color: #fff;
		border: 1px dashed #ddd;
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* 选择项区域 */
	.options-container {
		background-color: #fff;
		border-radius: 12rpx;
		overflow: hidden;
	}

	.option-item {
		display: flex;
		align-items: center;
		padding: 24rpx;
		border-bottom: 1px solid #f5f5f5;
	}

	.option-item:last-child {
		border-bottom: none;
	}

	.option-icon {
		margin-right: 20rpx;
		width: 32rpx;
		height: 32rpx;
	}

	.option-label {
		font-size: 30rpx;
		color: #333;
		flex: 1;
	}

	.option-arrow {
		margin-right: 16rpx;
	}

	.option-value {
		font-size: 28rpx;
		color: #999;
	}

	/* 发布按钮 */
	.publish-btn-container {
		padding: 20rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #f5f7fa;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
		z-index: 9;
	}

	.publish-btn {
		background-color: #2585f5;
		color: #fff;
		border: none;
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 30rpx;
		border-radius: 8rpx;
	}

	.publish-btn:disabled {
		background-color: #2585f5;
		color: #fff;
	}
</style>